<script setup lang="ts">
import { onMounted } from 'vue'
import ConsultItem from './consult-item.vue'
import { patientConsultOrderList } from '@/api/user'
import { ref } from 'vue'
import type { patientConsultOrderListApiRowsItem } from '@/types/user'
/*
1:基本请求拿到列表渲染
2：实现上拉加载
      van-list
         v-model:loading:是否处于加载中
         finished:是否加载完成
         finished-text:加载完成后的文本显示
         @load="load"
              发请求
              请求完成干什么？
                loading值变成false
                数据要累加
                修改下一页请求的参数
                判断是否加载完成：如果完成：finished=true

*/
const props = defineProps<{
  type: 1 | 2 | 3
}>()
const loading = ref(false)
const finished = ref(false)
const list = ref<patientConsultOrderListApiRowsItem[]>([])
let current = 1
const getData = async () => {
  const res = await patientConsultOrderList({
    current: current,
    pageSize: 10,
    type: props.type
  })
  loading.value = false
  list.value.push(...res.data.rows)
  current++
  if (list.value.length >= res.data.total) {
    finished.value = true
  }

  console.log('列表', res)
}

// 删除订单中某条数据
const delItem = (id: string) => {
  list.value = list.value.filter(item => item.id !== id)
}
</script>

<template>
  <div class="consult-list">
    <!-- :loading="loading" @update:loading="loading=$event" -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <consult-item v-for="i in list" :key="i.id" :item="i" @delItem="delItem" />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
